import React, {Component} from "react";
import {Image, ScrollView, StyleSheet, Text, Dimensions, TouchableOpacity,ImageBackground,View} from "react-native";
import DeviceStorage from "../utils/DeviceStorage";
import {NavigationActions} from "react-navigation";
import define from "../utils/define";
let image1 = require('../../res/img/guide01.jpg')
let image2 = require('../../res/img/guide02.jpg')
let image3 = require('../../res/img/guide03.jpg')
let image4 = require('../../res/img/guide04.jpg')


const { width, height } = Dimensions.get('window');
export default class GuideScene extends Component {

    static navigationOptions = ({navigation}: any) => ({
            header: null,
        }
    )

    constructor() {
        super();
    };
    render() {
        return (
            <ScrollView
                contentContainerStyle={styles.contentContainer}
                bounces={true}
                showsHorizontalScrollIndicator={false}
                pagingEnabled={true}
                horizontal={true}>
                <ImageBackground source={image1}
                       style={styles.backgroundImage} />
                <ImageBackground source={image2} style={styles.backgroundImage} />
                <ImageBackground source={image3} style={styles.backgroundImage} />
                <ImageBackground source={image4} style={[styles.backgroundImage,styles.btnOut]} >
                    <View style={{flex:1}}/>
                    <TouchableOpacity
                        style={styles.btn}
                        onPress={() => {
                            DeviceStorage.save(define.guide_flag,true)

                             //重置根视图，闪屏页=>主界面后销毁掉
                             const resetAction = NavigationActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({routeName: 'LoginViewController', params: {push: false,is_mine:false}})]
        })
        this.props.navigation.dispatch(resetAction)
                        }}
                    >
                        <Text style={styles.btnText}>开始体验</Text>
                    </TouchableOpacity>
                </ImageBackground>
            </ScrollView>);
    }
};
var styles = StyleSheet.create({
    contentContainer: {
        width: width * 4,
        height: height,
    },
    backgroundImage: {
        width: width,
        height: height,
    },
    btnOut:{
        alignItems:'center',
    },
    btn:{
        width:125,
        height:35,
        backgroundColor:'#DB3843',
        borderRadius:20,
        justifyContent:'center',
        alignItems:'center',
        marginBottom:60,

    },
    btnText:{
        fontSize:13,
        color:'#fff'
    },
});